<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人工智能互动科普库</title>
    <link rel="stylesheet" href="./css/styles.css">
    <style>
        /* 内联样式确保全屏显示 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
            overflow-x: hidden;
            /* 允许垂直滚动 */
            overflow-y: auto;
            /* 移除固定定位，使用相对定位 */
            position: relative;
            margin: 0;
            padding: 0;
        }
        
        /* 隐藏WebView的缩放控件 */
        .webview-zoom-controls {
            display: none !important;
        }
    </style>
</head>
<body>
    <h1>人工智能互动科普库</h1>
    <div class="bookshelf">
        <!-- 第一行书架 -->
        <div class="shelf-row">
            <div class="book solar-power" onclick="openBook('./html/SolarPower/SolarPower.html')">
                <div class="book-icon">☀️</div>
                <div class="book-title">太阳能发电</div>
            </div>
            <div class="book world-map" onclick="openBook('./html/VoiceInteractiveMap/VoiceInteractiveMap.html')">
                <div class="book-icon">🗺️</div>
                <div class="book-title">语音世界地图</div>
            </div>
            <div class="book turbofan" onclick="openBook('./html/TurbofanEngine/TurbofanEngine.html')">
                <div class="book-icon">✈️</div>
                <div class="book-title">涡扇发动机</div>
            </div>
            <div class="book hannault" onclick="openBook('./html/Hannault/index.html')">
                <div class="book-icon">🎯</div>
                <div class="book-title">汉诺塔</div>
            </div>
        </div>
        
        <!-- 第二行书架 -->
        <div class="shelf-row">
            <div class="book fossil" onclick="openBook('./html/specimen_fossil/index.html')">
                <div class="book-icon">🦕</div>
                <div class="book-title">化石互动展示</div>
            </div>
            <div class="book rock" onclick="openBook('./html/Specimens_Minerals/index.html')">
                <div class="book-icon">🪨</div>
                <div class="book-title">岩石互动展示</div>
            </div>
            <div class="book mineral" onclick="openBook('./html/Specimens_Minerals/index.html')">
                <div class="book-icon">💎</div>
                <div class="book-title">矿物互动展示</div>
            </div>
            <div class="book lightning" onclick="openBook('./html/Lightnin_Glow/index.html')">
                <div class="book-icon">⚡</div>
                <div class="book-title">闪电发光</div>
            </div>
        </div>
        
        <!-- 第三行书架 -->
        <div class="shelf-row">
            <div class="book radiometer" onclick="openBook('./html/Crooks_Radiometer/index.html')">
                <div class="book-icon">🌡️</div>
                <div class="book-title">克鲁克斯辐射计</div>
            </div>
            <div class="book manipulator" onclick="openBook('./html/Manipulator/index.html')">
                <div class="book-icon">🤖</div>
                <div class="book-title">机械臂</div>
            </div>
            <div class="book piano" onclick="openBook('./html/Remote_Piano/index.html')">
                <div class="book-icon">🎹</div>
                <div class="book-title">隔空钢琴</div>
            </div>
            <div class="book ai" onclick="openBook('./html/Fun_Beginner_AI/index.html')">
                <div class="book-icon">🧠</div>
                <div class="book-title">趣味AI入门</div>
            </div>
        </div>
        
        <!-- 第四行书架 -->
        <div class="shelf-row">
            <div class="book wheat" onclick="openBook('./html/Specimen_Wheat/index.html')">
                <div class="book-icon">🌾</div>
                <div class="book-title">小麦标本</div>
            </div>
            <div class="book soil" onclick="openBook('./html/Specimen_Soil/index.html')">
                <div class="book-icon">🌱</div>
                <div class="book-title">土壤标本</div>
            </div>
            <div class="book silkworm" onclick="openBook('./html/Specimen_Silkworm/index.html')">
                <div class="book-icon">🐛</div>
                <div class="book-title">蚕标本</div>
            </div>
            <div class="book dragonfly" onclick="openBook('./html/Specimen_Dragonfly/index.html')">
                <div class="book-icon">🦟</div>
                <div class="book-title">蜻蜓标本</div>
            </div>
        </div>
        
        <!-- 第五行书架 -->
        <div class="shelf-row">
            <div class="book foodcrops" onclick="openBook('./html/Specimens_FoodCrops/index.html')">
                <div class="book-icon">🌽</div>
                <div class="book-title">粮食作物标本</div>
            </div>
            <div class="book arthropods" onclick="openBook('./html/Specimens_Arthropods/index.html')">
                <div class="book-icon">🦗</div>
                <div class="book-title">节肢动物标本</div>
            </div>
            <div class="book beansprouts" onclick="openBook('./html/specimen_beanSprouts/index.html')">
                <div class="book-icon">🌿</div>
                <div class="book-title">豆芽标本</div>
            </div>
            <div class="book-placeholder">
                <div class="book-icon">📚</div>
                <div class="book-title">敬请期待</div>
            </div>
        </div>
        
    </div>
    
    <script>
        // 等待Android接口准备就绪
        function waitForAndroid() {
            return new Promise((resolve) => {
                if (window.AndroidInterface) {
                    resolve();
                } else {
                    setTimeout(() => waitForAndroid().then(resolve), 100);
                }
            });
        }
        
        async function openBook(url) {
            console.log('点击了书籍，开始动画');
            
            // 创建翻书动画
            const clickedBook = event.currentTarget;
            console.log('添加动画类到:', clickedBook);
            
            // 先移除可能存在的动画类
            clickedBook.classList.remove('book-opening');
            
            // 强制重绘
            clickedBook.offsetHeight;
            
            // 添加动画类
            clickedBook.classList.add('book-opening');
            
            console.log('动画类已添加，当前类名:', clickedBook.className);
            
            // 延迟跳转，让动画完成
            setTimeout(async () => {
                console.log('动画完成，准备跳转');
                
                try {
                    // 等待Android接口
                    await waitForAndroid();
                    
                    // 获取本地资源路径
                    const localPath = window.AndroidInterface.getLocalResourcePath(url);
                    console.log('原始URL:', url);
                    console.log('本地路径:', localPath);
                    
                    // 跳转到本地路径
                    window.location.href = localPath;
                } catch (error) {
                    console.error('获取本地路径失败:', error);
                    // 如果失败，使用原始URL
                    window.location.href = url;
                }
            }, 1000); // 增加到1秒确保动画完成
        }
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('人工智能互动科普库已加载');
            
            // 测试动画
            const books = document.querySelectorAll('.book');
            console.log('找到书籍数量:', books.length);
            
            books.forEach((book, index) => {
                console.log(`书籍 ${index + 1}:`, book.className);
            });
        });
    </script>
</body>
</html>
